<%--
  Created by IntelliJ IDEA.
  User: WDD
  Date: 2019/6/9
  Time: 21:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="${APP_PATH }/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH }/css/theme.css">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding : 5px;
            border: 1px #f60 solid;
        }
        #typeList  :not(:first-child) {
            margin-top:20px;
        }
        .label-txt {
            margin:10px 10px;
            border:1px solid #ddd;
            padding : 4px;
            font-size:14px;
        }
        .panel {
            border-radius:0;
        }

        .progress-bar-default {
            background-color: #ddd;
        }

        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .fileinput-button input{
            position:absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
            font-size: 200px;
        }

        .pic{
            width: 400px;
            height: 200px;
        }
        .pic img {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 张三<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="member.html"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" href="index.html"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                            </li>
                            <li >
                                <a rel="nofollow" href="projects.html"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
                            </li>
                            <li class="active">
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-edit"></i> 发起项目</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="minecrowdfunding.html"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel panel-default" >


                    <form  role="form" id="btnForm" class="form-horizontal" method="post"  enctype="multipart/form-data">
                    <div class="panel-heading" style="text-align:center;">
                        <div class="container-fluid">
                            <div class="row clearfix">
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;    position: absolute;width: 75%;right:49px;">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">1. 项目及发起人信息</div>
                                        </div>
                                    </div>
                                    <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(92, 184, 92, 1);
                                             border-top-color: rgba(92, 184, 92, 0);
                                             border-bottom-color: rgba(92, 184, 92, 0);
                                             border-right-color: rgba(92, 184, 92, 0);
                                        ">
                                    </div>
                                </div>
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                        <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">2. 回报设置</div>
                                        </div>
                                    </div>
                                    <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                    </div>
                                </div>
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                        <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">3. 确认信息</div>
                                        </div>
                                    </div>
                                    <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                    </div>
                                </div>
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;">
                                        <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">4. 完成</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="container-fluid">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <blockquote style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                        <b>
                                            项目及发起人信息
                                        </b>
                                    </blockquote>
                                </div>
                                <div class="col-md-12 column">
                                    <div class="page-header" style="    border-bottom-style: dashed;">
                                        <h3>
                                            项目信息
                                        </h3>
                                    </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-sm-2 control-label">分类信息</label>
                                            <div class="col-sm-10">
                                                <c:forEach items="${typeList}" var="typ">
                                                    <label class="radio-inline">
                                                        <input type="radio" name="type" value="${typ.id}"> ${typ.name}
                                                    </label>
                                                </c:forEach>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-sm-2 control-label">标签</label>
                                            <div class="col-sm-10">
                                                <ul style="list-style:none;padding-left:0;">
                                                    <%--<li style="margin:10px 0">[手机]--%>
                                                        <%--<span class="label-txt">手机</span> <span class="label-txt">快充</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span>--%>
                                                    <%--</li>--%>
                                                    <%--<li style="margin:10px 0">[数码]--%>
                                                        <%--<span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span>--%>
                                                    <%--</li>--%>
                                                    <%--<li style="margin:10px 0">[电脑]--%>
                                                        <%--<span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span> <span class="label-txt">文字标签</span>--%>
                                                    <%--</li>--%>
                                                    <c:forEach items="${tagRoot}" var="root">
                                                        <c:forEach items="${root.children}" var="tagP">
                                                            <li style="margin:10px 0">[${tagP.name}]
                                                            <c:forEach items="${tagP.children}" var="tagC">
                                                                <input type="radio" name="tag" value="${tagC.id}"> ${tagC.name}
                                                            </c:forEach>
                                                            </li>
                                                        </c:forEach>
                                                    </c:forEach>

                                                </ul>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">项目名称</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="name"  >
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">一句话简介</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="5" name="remark"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">筹资金额（元）</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" style="width:100px;" name="money" >
                                                <label class="control-label">筹资金额不能低于100元,不能高于1000000000元</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">筹资天数（天）</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" style="width:100px;" name="day">
                                                <label class="control-label">一般10-90天，建议30天</label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">项目详情</label>
                                            <div class="col-sm-10">
                                                <span id="uploadImgBtn" class="btn btn-primary fileinput-button">
                                                    <span>上传图片</span>
                                                    <input onchange="filechange(event)"  id="file" type="file" name="file" multiple>
                                                    <%--<img id="img" src="" width="400px" height="200px" style="display:none">--%>
                                                </span>
                                                <div id="imgDiv"></div>
                                                <%--<button type="button" class="btn btn-primary btn-lg active">上传图片</button>--%>
                                                <%--<label class="control-label">支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：宽740px</label>--%>
                                            </div>
                                        </div>
                                </div>
                                <div class="col-md-12 column">
                                    <div class="page-header" style="    border-bottom-style: dashed;">
                                        <h3>
                                            发起人信息
                                        </h3>
                                    </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">自我介绍</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="一句话自我介绍，不超过40字" name="intro">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">详细自我介绍</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="5" placeholder="向支持者详细介绍你自己或你的团队及项目背景，让支持者在最短时间内了解你，不超过160字" name="dintro"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">客服电话</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="此信息显示在项目页面" name="cphone">
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                    <div class="panel-footer" style="text-align:center;">
                        <button id="nextBtn" class="btn  btn-warning btn-lg" >下一步</button>
                        <%--<button >下步</button>--%>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container" style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.layoutit.cn">关于我们</a> | <a rel="nofollow" href="http://www.layoutit.cn">服务条款</a> | <a rel="nofollow" href="http://www.layoutit.cn">免责声明</a> | <a rel="nofollow" href="http://www.layoutit.cn">网站地图</a> | <a rel="nofollow" href="http://www.layoutit.cn">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2017-2017layoutit.cn 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div> <!-- /container -->
<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script src="${APP_PATH}/script/back-to-top.js"></script>
<script src="${APP_PATH }/jquery/jquery-form/jquery-form.min.js"></script>
<script type="text/javascript" src="${APP_PATH }/jquery/layer/layer.js"></script>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })


    //图片预览
    /*$("#file").change(function (event) {*/
//    var filechange=function(event){
//        var inp = event.path[0];
//        pid = $(inp).next()[0];
//        var files = event.target.files, file;
//        if (files && files.length > 0) {
//            // 获取目前上传的文件
//            file = files[0];// 文件大小校验的动作
//            if(file.size > 1024 * 1024 * 2) {
//                alert('图片大小不能超过 2MB!');
//                return false;
//            }
//            // 获取 window 的 URL 工具
//            var URL = window.URL || window.webkitURL;
//            // 通过 file 生成目标 url
//            var imgURL = URL.createObjectURL(file);
//            //取消隐藏
//            $(pid).css('display','block');
//            //用attr将img的src属性改成获得的url
//            $(pid).attr("src",imgURL);
//            // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
//            // URL.revokeObjectURL(imgURL);
//        }
//    };



//    //为外面的盒子绑定一个点击事件
//    $("#uploadImgBtn").click(function(){
//        $("#imgDiv div").remove();
//        $("#file").val("");
//        var div = "";
//        var img = "";
//        var fr = "";
//        var length = "";
//        var files = "";
//        var $input = "";
//        /*
//        1、先获取input标签
//        2、给input标签绑定change事件
//        3、把图片回显
//         */
////            1、先回去input标签
//        $input = $("#file");
//        console.log($input)
////            2、给input标签绑定change事件
//        $input.on("change" , function(){
//            //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
//            //获取选择图片的个数
//            files = this.files;
//            length = files.length;
//            console.log("选择了"+length+"张图片");
//            console.log(files)
////            console.log(this);
////            console.log($input[0]);
//            //3、回显
////            $.each(files,function(key,value){
////                //每次都只会遍历一个图片数据
////                div = document.createElement("div"),
////                img = document.createElement("img");
////                div.className = "pic";
////
////                fr = new FileReader();
////                fr.onload = function(){
////                    img.src=this.result;
////                    div.appendChild(img);
//////                        document.body.appendChild(div);
////                    console.log(div);
////                    $("#imgDiv").append(div);
////                }
////                fr.readAsDataURL(value);
////                console.log(key)
////                console.log(value)
////            })
//
//        })
//    })


    /**
     * 多张图片预览
     * @param event
     */
    var filechange=function(event){
        $("#imgDiv div").remove();

        var inp = event.path[0];
        var files = event.target.files;
        $.each(files,function(key,value){
                //每次都只会遍历一个图片数据
               var div = document.createElement("div"),
                   img = document.createElement("img");
            div.className = "pic";

            var fr = new FileReader();
                fr.onload = function(){
                    img.src=this.result;
                    div.appendChild(img);
                    $("#imgDiv").append(div);
                }
                fr.readAsDataURL(value);
            })
    };

    $("#nextBtn").click(function () {
        var val1=$('input:radio[name="type"]:checked').val();
        var val2=$('input:radio[name="tag"]:checked').val();
        var val3=$('input:text[name="name"]').val();
        var val4=$('textarea[name="remark"]').val();
        var val5=$('input:text[name="money"]').val();
        var val6=$('input:file[name="file"]').get(0).files[0];
        var val7=$('input:text[name="intro"]').val();
        var val8=$('textarea[name="dintro"]').val();
        var val9=$('input:text[name="cphone"]').val();

        if(val1==null || val2==null || val3=="" || val4=="" || val5=="" || val6==null || val7=="" || val8=="" || val9==""){
            layer.msg("请填写完整数据", {time:1000, icon:5, shift:6});
            return false;
        }


        var options = {
            url:"${APP_PATH}/project/inPro.do",
            success : function(result){
                if(result.success){
                    window.location.href="${APP_PATH}/project/start-step-2.htm";
                }
            }
        };
        $("#btnForm").ajaxSubmit(options); //异步提交
        return ;


//        console.log(val3)
////        val1==null ||
//        //val3 == ""  val6 == null
//        if( val6 == null){
//            alert("什么也没选中!");
//            return false;
//        }else{
//            alert("选中!");
//            return false;
//        }


    })



</script>
</body>
</html>
